<template>
  <div class="dashboard-container">
    <div class="top-charts">
      <el-row :gutter="40">
        <el-col :span="6" :xs="12">
          <div class="grid-content">
            <svg-icon icon-class="peplo" />
            <div class="right-data">
              <span class="text">用户数</span>
              <span class="number">{{ data.userTotal }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6" :xs="12">
          <div class="grid-content">
            <svg-icon icon-class="topBanner" />
            <div class="right-data">
              <span class="text">轮播图数</span>
              <span class="number">{{ data.bannnerTotal }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6" :xs="12">
          <div class="grid-content">
            <svg-icon icon-class="topNews" />
            <div class="right-data">
              <span class="text">新闻数</span>
              <span class="number">{{ data.newsTotal }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6" :xs="12">
          <div class="grid-content">
            <svg-icon icon-class="client" />
            <div class="right-data">
              <span class="text">客户申请数</span>
              <span class="number">1000</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getTopData } from '@/api/search'
export default {
  name: 'Dashboard',
  data() {
    return {
      data: {}
    }
  },
  computed: {
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      try {
        const res = await getTopData()
        this.data = res.data
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard-container {
    margin: 20px;
  }

  .top-charts {
    padding: 20px;
    background-color: #f0f2f5;
  }

  .grid-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 110px;
    padding: 30px 40px;
    background-color: #fff;
  }

  .right-data {
    display: flex;
    flex-direction: column;
    .text {
      color: #8c8c8c;
    }
    .number {
      margin-top: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }

  .svg-icon {
    font-size: 48px;
  }

</style>
